import React, { Component } from 'react';
import {Affix,DatePicker,Row} from 'antd';
import style from './system.module.css';
import Card from './card/card';
import CAccess from './chart-access/chart-access';
import FangKe from './chart-fangke/chart-fangke';
import SheBei from './chart-shebei/chart-shebei';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
class System extends Component {
    constructor(props) {
        super(props);   
    }

    state={
        check_idx:0, //控制头部选择
        card_data:[
            {id:1,name:'总访问数',data:3991,info:'平均访问总数'},
            {id:2,name:'访问深度',data:168,info:'平均访问深度'},
            {id:3,name:'浏览数',data:18,info:'人均浏览页面数'},
            {id:4,name:'停留时长',data:'19.9s',info:'平均停留时长'}
        ],
        affixed:false
    }

    change_affixed=(affixed)=>{
        this.setState({
            affixed
        })
    }

    checkHandle=(idx)=>{
        this.setState({
            check_idx:idx
        })
    }

    render() {  
        return (
            <div className={style.system}>
                <Affix>
                    <div className={style.header}>
                        <RangePicker className={style.timechoose} />
                        <div className={style.checkbox}>
                            <ul>
                                <li className={this.state.check_idx==0?style.checkbox_active:''} onClick={this.checkHandle.bind(this,0)}>今日</li>
                                <li className={this.state.check_idx==1?style.checkbox_active:''} onClick={this.checkHandle.bind(this,1)}>昨日</li>
                                <li className={this.state.check_idx==2?style.checkbox_active:''} onClick={this.checkHandle.bind(this,2)}>最近7天</li>
                                <li className={this.state.check_idx==3?style.checkbox_active:''} onClick={this.checkHandle.bind(this,3)}>最近30天</li>
                            </ul>
                        </div>
                    </div>
                </Affix>
                <div className={style.content}>
                    <Row type="flex" justify="space-between">
                    {
                        this.state.card_data.map((e,index)=>(<Card key={index} data={e}/>))
                    }
                    </Row>
                    <img className={style.banner} src={require('./images/system_Banner.png')} alt=""/>
                    <CAccess />
                    <Row type="flex" justify="space-between">
                        <FangKe />
                        <SheBei />
                    </Row>
                </div>
            </div>
        );
    }
}
 
export default System;